// 交际用语
<template>
  <div class="wrapper"> 
    <div class="exam_container"> 
      <div class="title"> 
        {{topicData.code}}. {{topicData.title}}
      </div>
      <div> 
        <el-radio-group v-model="radio" @change="check">
          <el-radio :label="item.value" v-for="(item,index) in topicData.option" :key="index">{{item.label}}</el-radio>
        </el-radio-group>
      </div>
    </div>
    <div>
      <el-button type="success" @click="answer_show = true">查看答案</el-button>
      <el-button type="primary" @click="nextClick">下一题</el-button>
    </div>
    <!-- 正确答案 -->
    <div class="answer_container" :class="color" v-show="answer_show"> 
      正确答案: {{topicData.answer}}
    </div>
    <!-- 题号 -->
    <div class="code_list">
      <div  class="code_item" 
            v-for="(item,index) in topicData_all" 
            :key="index" 
            @click="skip(item)"
            :class="item.code === topicData.code?'active':''">{{item.code}}</div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      radio:"",
      topicData_all:[],
      topicData:{},
      index:0,
      answer_show:false,
      color:"success"
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
    this.url = sessionStorage.getItem('url')
    this.get_dataFun()
  },
  methods: {
    get_dataFun(){
      this.$axios({
        methods:'get',
        url:`../../static/data/${this.url}.json`
      }).then((response)=>{
        console.log(response)
        this.topicData_all = response.data.data
        this.topicData = response.data.data[0]
      })
    },
    // 下一题
    nextClick(){
      this.answer_show = false
      if(this.index < this.topicData_all.length-1){
        this.radio = ""
        this.index++
        this.topicData = this.topicData_all[this.index]
      }else{
        this.$message({
          message: '已经是最后一题',
          type: 'error'
        });
      }
    },
    // 跳转
    skip(row){
      this.answer_show = false
      this.index = row.code-1
      this.topicData = row
      this.radio = ""
    },
    // 效验
    check(){
      this.color = this.radio === this.topicData.answer?"success":"error";
      this.answer_show = true
    }
  },
};
</script>
<style scoped>
.exam_container{
  padding-top: 20px;
  padding-bottom: 20px;
  width: 100%;
}
.el-radio{
  margin-top: 20px;
  display: block;
  text-align: left;
}
.answer_container{
  padding: 10px;
  color:#fff;
  margin-top: 10px;
}
.success{
  background: #409EFF;
}
.error{
  background: #F56C6C;
}
.code_list{
  width: 100%;
  padding: 10px;
  border: 1px solid #eee;
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}
.code_item{
  cursor: pointer;
  width: 40px;
  height: 40px;
  border: 1px solid #eee;
  text-align: center;
  line-height: 40px;
  margin-left: 10px;
  margin-top:10px;
}
.active{
  background:#409EFF;
  color: #fff;
}
</style>